<template>
<div>
  
   <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-tickets"></i> 菜单管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="handle-box">
          <el-button @click="toggleSelect()">测试</el-button>
          <el-button type="primary" icon="add" class="handle-add mr10"  @click="addDialog()" >添加</el-button>
          <el-button type="success" icon="update" class="handle-add mr10"  @click="updateDialog()" >修改</el-button>
           <el-button type="danger" icon="delete" class="handle-add mr10"  @click="deleteDialog()" >删除</el-button>
    </div>
 <tree-table :data="tableData" :columns="columns" border/>

    <!-- 新增弹出框 -->
    <el-dialog title="新增菜单" :visible.sync="addVisible" width="80%">
      <el-form ref="form" :model="form" label-width="100px">
     
        <el-form-item label="菜单名称">
          <el-input v-model="form.name" ></el-input>
        </el-form-item>

        <el-form-item label="图标">
          <el-input v-model="form.icon" ></el-input>
        </el-form-item>

        <el-form-item label="url">
          <el-input v-model="form.url" ></el-input>
        </el-form-item>
      

        <el-form-item label="菜单类型">
          <el-select v-model="form.type" placeholder="请选择类型">
            <el-option label="目录" value="1"></el-option>
            <el-option label="菜单" value="2"></el-option>
            <el-option label="按钮" value="3"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="所属菜单">
          <el-tag >{{form.parentName}}</el-tag>
        </el-form-item>

          <el-button type="primary" @click="add()">新增</el-button>
          <el-button @click="addVisible = false">取 消</el-button>
      </el-form>
    </el-dialog>


    
    <!-- 修改弹出框 -->
    <el-dialog title="修改弹出框" :visible.sync="editVisible" width="80%">
      <el-form ref="form" :model="form" label-width="100px">
     
        <el-form-item label="菜单名称">
          <el-input v-model="form.name" ></el-input>
        </el-form-item>

        <el-form-item label="图标">
          <el-input v-model="form.icon" ></el-input>
        </el-form-item>

        <el-form-item label="url">
          <el-input v-model="form.url" ></el-input>
        </el-form-item>
      

        <el-form-item label="菜单类型">
          <el-select v-model="form.type" placeholder="请选择类型">
            <el-option label="目录" value="1" key="1"></el-option>
            <el-option label="菜单" value="2" key="2"></el-option>
            <el-option label="按钮" value="3" key="3"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="所属菜单">
          <el-tag >{{form.parentName}}</el-tag>
        </el-form-item>

          <el-button type="primary" @click="update()">修改</el-button>
          <el-button @click="editVisible = false">取 消</el-button>
      </el-form>
      
    </el-dialog>

     <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
      <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
      <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
    </el-dialog>
  </div>

</template>
<script>
import treeTable from "./TreeTable";
  export default {
    
    components: { treeTable },
    data() {
      return {
        tableData: [],
        checkList:[],
        addVisible:false,
        editVisible:false,
        delVisible:false,
        form:{
          name:'',
          icon:'',
          url:'',
          type:'',
          parentId:null,
          parentName:'',
        },
         columns: [
        {
          text: "名称",
          value: "name",
          width: 180
        },
        {
          text: "图标",
          value: "icon",
          width: 180
        },
        {
          text: "类型",
          value: "type",
         
        },
        {
          text: "url",
          value: "url",
         
        }
      ],
      
    
      }
    },
    created() {
        this.getData();
    },
    methods: {
        setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleCurrentChange(val) {
      
        this.currentRow = val;
      },
      /**
       *设置选中
       */
    toggleSelection(rows) {
      var that = this;
        if (rows) {
          rows.forEach(row => {
            var tempRow = that.getChildNodeByKey(that.tableData,row.id);
            if(row.list != null && row.list != undefined && row.list.length != undefined && row.list.length != 0){
               that.toggleSelection(row.list);
               if(tempRow != undefined && tempRow.list != undefined  && tempRow.list.length != undefined && tempRow.list.length == row.list.length ){
                  this.$refs.multipleTable.toggleRowSelection(row);
               }
            }else{
              this.$refs.multipleTable.toggleRowSelection(row);
            }
            
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      toggleSelect(){
        this.toggleSelection(this.tableData);
      },
      /**
       * checkbox 的选中方法
       */
      handleSelectionChange(val) {
        
        this.multipleSelection = val;
      },
      /**
       * 获取所有子集
       */
      getChilds(list ){
        var that = this;
        for(var i in list){
          if(list[i].list != null ){
            that.getChilds(list[i].list);
          }else{
             if(list[i].id != ''){
          
                that.checkList.push(list[i]);
             }
           
          }

        }
        return list;
      },
      /**
       * 根据key 和value 查询是否存在
       */
      getChildByKey(list ,key ,value){
        var res = false;
        var that = this;
        for(var i in list){
          if(list[i].key == value){
              res = true;
              break;
          }
        }
        return res;
      },
      /**
       * 获取子节点根据key 和value 
       */
      getChildNodeByKey(list  ,value){
        var res ;
        var that = this;
        for(var i in list){
          if(list[i].list != null && list[i].list != undefined && list[i].list.length != 0){
              res=this.getChildNodeByKey(list[i].list,value);
             
          }
          if(res != undefined ){
            break;
          }
          if(list[i].id == value){
              res = list[i];
              break;
          }
        }
        return res;
      },
      // load(tree, treeNode, resolve) {
      //   setTimeout(() => {
      //     resolve([
      //       {
      //         id: 31,
      //         date: '2016-05-01',
      //         name: '王小虎',
      //         address: '上海市普陀区金沙江路 1519 弄'
      //       }, {
      //         id: 32,
      //         date: '2016-05-01',
      //         name: '王小虎',
      //         address: '上海市普陀区金沙江路 1519 弄'
      //       }
      //     ])
      //   }, 1000)
      // },
      getData(){
        var that = this;
         this.HttpUtil.encryptGet(
          this,
          this.Global.URLPATH.MENU_QUERY_ALL,
          {
           roleId:1
          },
          function (data) {
          
            that.tableData = data.data.menuList;

            
            
          },
          function (data) {//访问失败
            //that.$message.success(data.msg);
          });
      },
      addDialog(){
         this.form.id = null;
        this.form.name ='';
        this.form.icon ='';
        this.form.url ='';
        this.form.type =null;
        this.form.parentId =null;
        this.form.parentName ='无';
        if(this.currentRow == undefined){
          // this.$message.error("请选择行数后操作");
          // return
        }else{
            this.form.parentName = this.currentRow.name;
            this.form.parentId = this.currentRow.id;
        }
        this.addVisible = true;
      },
      add(){
         if(this.form.name == '' || this.form.type == null){
            this.$message.error("请输入菜单名称");
            return
        }
        if(this.form.type == undefined || this.form.type == null){
            this.$message.error("请选择类型");
            return
        }
         
        var that = this;
        this.HttpUtil.encryptPost(
          this,
          this.Global.URLPATH.MENU,
          this.form,
          function (data) {
              that.getData();
              that.addVisible = false;
          },
          function (data) {//访问失败
            //that.$message.success(data.msg);
          });
      },
      updateDialog(){
        
        if(this.currentRow == undefined){
          this.$message.error("请选择行数后操作");
          return
        }else{
           this.form.id = this.currentRow.id;
            this.form.name = this.currentRow.name;
            this.form.icon = this.currentRow.icon;
            this.form.url = this.currentRow.url;
            this.form.type = this.currentRow.type;
            this.form.parentName = this.currentRow.parentName;
            this.form.parentId = this.currentRow.parentId;
        }
        this.editVisible = true;
      },
       update(){
         if(this.form.name == '' || this.form.type == null){
            this.$message.error("请输入菜单名称");
            return
        }
        if(this.form.type == undefined || this.form.type == null){
            this.$message.error("请选择类型");
            return
        }
         
        var that = this;
        this.HttpUtil.encryptPut(
          this,
          this.Global.URLPATH.MENU+"/"+this.form.id,
          this.form,
          function (data) {
              that.getData();
              that.editVisible = false;
          },
          function (data) {//访问失败
            //that.$message.success(data.msg);
          });
      },
      deleteDialog(){
        console.log(checkList);
        return
        if(this.currentRow.list != undefined && this.currentRow.list != null && this.currentRow.list.length >0){
          this.$message.error("请先删除子节点");
          return
        }
        this.form.id = this.currentRow.id;
        this.delVisible = true;
      },
      deleteRow(){
        var that = this;
        this.HttpUtil.encryptDelete(
          this,
          this.Global.URLPATH.MENU+"/"+this.form.id,
          {
            id: this.form.id
          },
          function (data) {
              that.getData();
              that.delVisible = false;
          },
          function (data) {//访问失败
            //that.$message.success(data.msg);
          });
      }
    },
    watch:{
      $route(newValue, oldValue){
        if(newValue.path == "/role/menu"){
          this.getData();
        }
      }
    }
  }
</script>

<style>
 .handle-box {
    margin-bottom: 10px;
  }
</style>
